/*
 * @Title: 回复
 * @Created by: gsjPC 
 */
<template>
	<view>
		<!-- 回复主评论的评论详情 -->
		<uni-popup ref="goHfDetail2" :type="type" :custom="true" @change="change" class="goHfDetail2">
			<view class="uni-share" :style="{height:replyHeight + 'px'}">
				<view class="uni-share-title">
					<view>评论详情</view>
					<uni-icon type="closeempty" size="20" color="#999999" @tap="cancel('goHfDetail2')"></uni-icon>
				</view>
				<view class="uni-share-content">
					<view class="pl-item">
						<view class="comment-item" v-for="(comment,index4) in reply2List" :key="index4">
							<view @tap="packs">
								<view class="item-head">
									<image class="head-icon" :src="comment.comHead" mode=""></image>
									<text class="username">{{comment.name}}</text>
									<text class="time">{{comment.comTime}}</text>
								</view>
								<text class="pinglun">{{comment.comment}}</text>
								<!-- <view class="photo-list">
									<image :src='img' @click="showBig(img)" mode="" v-for="(img,index2) in item.photo" :key='index2'></image>
								</view> -->
							</view>
							
							<!-- icon -->
							<view class="zp-btn">
								<!-- 点赞 -->
								<view>
									<image src="/static/plZan0.png" mode=""></image>
									<text class="zp-text">{{comment.zan}}</text>
								</view>
								<!-- 评论 -->
								<view class="plBtn" @tap="plBtn(index4)">
									<image src="/static/plPl0.png" mode=""></image>
									<text class="zp-text">{{comment.plnum}}</text>
									<!-- 	<input type="text"/> -->
								</view>
								<!-- 举报 -->
								<view class="plJb" @tap="toggleJb1(index4)" >
									<image src="/static/plMore.png" mode=""></image>
									<view  
										class="jbBtn"  
										@tap="jubaoBtn(index4)" 
										v-if="jubaoBtnIndex1 == index4">
										举报
									</view>
								</view>
							</view>
							<view class="allrepTit" v-if="comment.comPl.length !== 0 ">全部回复</view>
							
							<view class="pl-item">
								<!-- 对评论的评论 -->
									<view class="comment-item" v-for="(pl1,pl1Index) in comment.comPl" :key="pl1Index">
										<view @tap="packs">
											<view class="item-head">
												<image class="head-icon" :src="pl1.comHead" mode=""></image>
												<text class="username">{{pl1.name}}</text>
												<text class="time">{{pl1.comTime}}</text>
											</view>
											<text class="pinglun">{{pl1.comment}}</text>
										</view>
										<view class="zp-btn">
											<!-- 点赞 -->
											<view>
												<image src="/static/plZan0.png" mode=""></image>
												<text class="zp-text">{{comment.zan}}</text>
											</view>
											<!-- 举报 -->
											<view class="plJb" @tap="toggleJb3(pl1Index)" >
												<image src="/static/plMore.png" mode=""></image>
												<view  
													class="jbBtn"  
													@tap="jubaoPlBtn(pl1Index)" 
													v-if="jubaoBtnIndex3 == pl1Index">
													举报
												</view>
											</view>
										</view>
									</view>
								
								
								<!-- <view class="reply-more" v-if="comment.comPl.length >= 2">
									<text @tap="zhanKai(item)">{{item.isShow ?'收起':'查看全部'+comment.plnum+'条回复' }}</text>
								</view> -->
							</view>
							
							</view>
				    </view>
				</view>
			</view>
			<view class="talkInput">
				<view class="inputFl">
					<image src="/static/talkInput.png"></image>
					<input 
					type="input" 
					:placeholder="repPolaceholder" 
					placeholder-style="color:#B6B6B6" 
					adjust-position="false"
					@focus="isShowSendFocus"
					@blur="isShowSendBlur"/>
				</view>
				<view class="inputFr" v-if="isShowSend">
					<text>发送</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default {
		components: {
			uniPopup,
			uniIcon
		},
		data() {
			return {
				type: '',
				repPolaceholder:'',
				isShowSend:false,//底部input获取焦点才显示
				jubaoBtnIndex1:-1,//默认隐藏举报按钮
				jubaoBtnIndex3:-1,//默认隐藏举报按钮
				
			}
		},
		props: {
			reply2List: {
				type: Array,
				default: function() {
					return []
				}
			},

		},
		methods: {
			togglePopup(type, open) {
				this.type = type;
				console.log(this.reply2List[0].name);
				this.repPolaceholder = '回复' + this.reply2List[0].name
				this.$refs[open].open()
			},
			cancel(type) {
				this.$emit('emptyData2');
				this.jubaoBtnIndex1 = -1
				this.jubaoBtnIndex3 = -1
				this.$refs[type].close();
			},
			change(e) {
				console.log(e.show)
			},
			//收起举报事件
			packs(){
				this.jubaoBtnIndex1 = -1
				this.jubaoBtnIndex3 = -1
			},
			//举报
			toggleJb1(index4){
				if(this.jubaoBtnIndex1 !== index4){
					this.jubaoBtnIndex1 = index4;
					this.jubaoBtnIndex3 = -1
				}else{
					this.jubaoBtnIndex1 = -1
				}
			},
			// 举报一级评论
			jubaoBtn(index4){
				console.log('举报一级评论');
				uni.navigateTo({
					url:'/pages/common/report'
				});
				this.jubaoBtnIndex1 = -1
				this.jubaoBtnIndex3 = -1
			},
			// 举报
			toggleJb3(pl1Index){
			if(this.jubaoBtnIndex3 !== pl1Index){
				this.jubaoBtnIndex3 = pl1Index;
				 this.jubaoBtnIndex1 = -1
			}else{
				this.jubaoBtnIndex3 = -1
			}
			},
			// 举报二级评论 
			jubaoPlBtn(pl1Index){
				console.log('举报二级评论');
				uni.navigateTo({
					url:'/pages/common/report'
				});
				this.jubaoBtnIndex1 = -1
				this.jubaoBtnIndex3 = -1
			},
			zhanKai(item) {
				if (!item.isShow) {
					this.$set(item, 'isShow', false)
					item.isShow = !item.isShow
				} else {
					item.isShow = !item.isShow
				}
				},
				// 底部input获取焦点
				isShowSendFocus(){
					this.isShowSend = true
				},
					// 底部input失去焦点
				isShowSendBlur(){
					this.isShowSend = false
				}
		},
		computed: {
			replyHeight() {
				return global.winHeight - global.statusBarHeight
			},

		}
	}
</script>

<style>
	.pl-item {
		width: 700upx;
		padding-top: 40upx;
		height: auto;
	}

	.item-head {
		width: 700upx;
		height: 80upx;
	}

	.head-icon {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		float: left;
		margin-right: 14upx;
	}

	.username {
		font-size: 30upx;
	}

	.time {
		font-size: 22upx;
		height: 80upx;
		line-height: 80upx;
		float: right;
		margin-left: 20upx;
		color: #888888;
	}

	.time-type {
		font-size: 24upx;
		height: 80upx;
		width: 610upx;
		display: block;
		line-height: 80upx;
		float: right;
		text-align: left;
		margin-top: -40upx;
		margin-left: 20upx;
		color: #888888;
	}

	.pinglun {
		width: 619upx;
		text-align: justify;
		text-indent: 56upx;
		display: block;
		word-break: break-all;
		font-size: 28upx;
		line-height: 40upx;
		margin-top: 20upx;
		margin-left: 75upx;
		max-height: 120upx;
		overflow: hidden;
	}

	.autoPinglun {
		max-height: none;
	}

	.pinglun-food {
		text-indent: 0upx;
	}

	.photo-list {
		margin-top: 20upx;
		margin-left: 75upx;
		height: auto;
		display: flex;
		flex-direction: row;
		/* justify-content: space-between; */
		flex-wrap: wrap
	}

	.photo-list image {
		width: 192upx;
		margin-bottom: 15upx;
		margin-right: 15upx;
		height: 146upx;
		border-radius: 10upx;
		overflow: hidden;
	}

	.photo-list image:nth-child(3) {
		margin-right: 0;
	}

	.zp-btn {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}
	
		.zp-btn>view {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding:15upx 34upx 15upx 34upx;
		}
	/* 	.zp-btn>view:last-child{
			margin-right:0upx;
		} */

	.zp-btn image {
		width: 29upx;
		height: 26upx;
		margin-right: 10upx;
	}

	.zp-text {
		font-size: 24upx;
		line-height: 26upx;
		color: #999999;
	}

	.reply {
		/* 	background: #999; */
			width: 622upx;
			/* max-height: 190upx; */
			overflow: hidden;
			margin-top: 20upx;
			margin-left: 75upx;
			background-color: #F6F6F6;
			border-radius: 10upx;
			padding: 0upx 20upx;
			position: relative;
			box-sizing: border-box;
			transition: all .3s ease;
	}

	.rlHeight {
		max-height: none;
		transition: all .3s ease;
	}

	.reply:before {
		content: '';
		position: absolute;
		margin-left: 26px;
		top: -36upx;
		border: 10px solid transparent;
		border-top-color: #D0D0D0 !important;
		transform: rotateX(180deg);
		z-index: -1;
	}

	.comment-item {
		margin-bottom:70upx ;
		/* background: green; */
		/* margin-top: 24upx; */
	}
	.reply-user {
		line-height: 44upx;
		
	}

	.reply-user .username {
		font-size: 24upx;
		color: #22498B;
	}

	.reply-user .time {
		width: 400upx;
		display: block;
		font-size: 24upx;
		color: #54B0FF;
	}

	.reply-user .hf {
		font-size: 24upx;
		padding: 0 8upx;
		color: #333;
	}

	.reply-text {
		font-size: 26upx;
		color: #333333;
	}

	.reply-more {
		color: #86A8FF;
		font-size: 22upx;
		text-align: right;
		margin-top: 14upx;
		margin-bottom: 14upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	

	.read-num {
		font-size: 24upx;
		color: #999999;
		float: left !important;
		margin-left: 80upx;
	}

	.plJb{
		position: relative;
		}
	.jbBtn{
		position: absolute;
		right: 0;
		font-size: 24upx;
		color: #333333;
		width: 184upx;
		height: 70upx;
		line-height: 70upx;
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 20px 0px rgba(216,216,216,1);
		text-align: center;
		bottom:-90upx;
		z-index: 1;
		}
	.plJb image{
		width:6upx;
		height: 26upx;
	}

	.allrepTit {
		width: 100%;
		margin: 28upx auto 40upx auto;
		font-size: 26upx;
		text-align: center;
		position: relative;
	}

	.allrepTit:before {
		content: '';
		width: 282upx;
		height: 1px;
		background: #F0F0F0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}

	.allrepTit:after {
		content: '';
		width: 282upx;
		height: 1px;
		background: #F0F0F0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
	}
	.allHfBox{
		margin-bottom:90upx;
	}
	/* 底部分享 */
	.uni-share {
		padding: 34upx 28upx;
		overflow-y: auto;
		background: #fff;
		border-radius: 26upx 26upx 0 0;
		box-sizing: border-box;
	}

	.uni-share-title {
		width: 100%;
		border-radius: 26upx 26upx 0 0;
		background: #FFFFFF;
		padding: 0upx 54upx;
		z-index: 9;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		line-height: 98upx;
		font-size: 24upx;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: #333333;
		font-size: 28upx;
		border-bottom: 1px solid #ECEAEA;
	}

	.uni-share-title uni-icon {
		position: absolute;
		padding: 20upx;
		right:0;
	}

	.uni-share-content {
		margin-top: 44upx;
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}
	.talkInput {
		width: 100%;
		padding: 0 38upx;
		height: 90upx;
		line-height: 90upx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 888;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}
	
	.talkInput .inputFl image {
		width: 36upx;
		height: 36upx;
		position: absolute;
		top: 50%;
		margin-top: -20upx;
		left: 40upx;
	}
	
	.talkInput input {
		height: 90upx;
		line-height: 90upx;
		padding-left: 90upx;
		font-size: 30upx;
	}
	.inputFr {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border:1px solid #B9B9B9;
		border-radius: 6upx;
		width:112upx;
		height: 60upx;
		line-height: 60upx;
	}
	.talkInput text {
		padding: 8upx;
		font-size: 30upx;
		color: #999999;
	}
	
</style>
